<template>
  <div class="html-role">
    <el-card class="box-card">
      <el-row type="flex" justify="end">
        <el-button
          type="primary"
          size="mini"
          @click="openFn"
        >添加角色</el-button>
      </el-row>
      <el-divider />
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="角色名称" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" size="mini" @click="permissionsFn(row.id)">分配权限</el-button>
            <el-button size="mini" @click="updateFn(row.id)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delFn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑弹框 -->
    <el-dialog
      :title="formData.id ? '编辑角色' : '添加角色'"
      :visible="showDialog"
      @close="closeFn"
    >
      <el-form ref="form" :rules="rules" :model="formData">
        <el-form-item label="角色名称" label-width="150px" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="角色描述" label-width="150px" prop="description">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 权限弹框 -->
    <el-dialog title="提示" :visible.sync="isShowDialog">
      <!-- default-checked-keys="[2] 对应id  -->
      <el-tree
        ref="tree"
        :props="{ label: 'title' }"
        :data="Treedata"
        show-checkbox
        node-key="id"
        :check-strictly="true"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="assignPermFn"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleList,
  postRole,
  getRoleId,
  putRole,
  delRole
} from '@/api/role/index'
import { getPermissionlist } from '@/api/permissions'
import { listToTree } from '@/utils/index'
export default {
  data() {
    return {
      roleDetail: {},
      Treedata: [],
      isShowDialog: false,
      formData: {
        title: '',
        description: ''
      },
      showDialog: false,
      tableData: [],
      rules: {
        title: [
          { required: true, message: '角色名称不能为空！', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空！', trigger: 'blur' }
        ]
      },
      roleId: ''
    }
  },
  async created() {
    this.getRoleList()
    // 获取权限列表
    const res = await getPermissionlist()
    this.Treedata = listToTree(res.data, '0')
  },
  methods: {
    // 确定 分配权限
    async assignPermFn() {
      const Arr = this.$refs.tree.getCheckedKeys()
      await putRole({
        id: this.roleId,
        permissions: Arr
      })
      this.isShowDialog = false
    },
    // 权限弹窗
    async permissionsFn(id) {
      // 保存id
      this.roleId = id
      this.isShowDialog = true
      // // 根据id获取权限
      const res = await getRoleId(id)
      this.roleDetail = res.data.permissions
      const newArr = this.roleDetail.map(item => item.id)
      // 回显默认权限点
      this.$refs.tree.setCheckedKeys(newArr)
    },
    // 获取列表
    async getRoleList() {
      const res = await getRoleList()
      this.tableData = res.data
    },
    // 渲染编辑弹框
    async updateFn(id) {
      this.showDialog = true
      const res = await getRoleId(id)
      this.formData = res.data
    },
    // 添加 / 编辑角色
    async confirmFn() {
      // 表单校验
      await this.$refs.form.validate()
      if (this.formData.id) {
        await putRole(this.formData)
      } else {
        // 添加接口
        await postRole(this.formData)
      }
      // 渲染
      this.getRoleList()
      // 关闭
      this.closeFn()
    },
    // 打开弹窗
    openFn() {
      this.showDialog = true
    },
    // 关闭弹窗
    closeFn() {
      // 清空弹框内容
      this.formData = {}
      // 清空校验
      this.$refs.form.resetFields()
      this.showDialog = false
    },
    // 删除角色
    async delFn(id) {
      this.$confirm('是否确定删除？', '删除', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async() => {
          await delRole(id)
          this.getRoleList()
        })
        .catch((err) => {
          console.log('取消：', err)
        })
    }
  }
}
</script>

<style scoped>
.html-role {
  margin: 20px;
}
</style>
